<!--
 * @Author: ckk
 * @Date: 2022-08-11 14:20:24
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-07-17 15:32:24
 * @Description:
-->
<!-- swiper公共组件 -->
<template>
  <div class="reco-swiper" :style="{height: datas.setStyle.apiUrl.indexOf('gaoshou') !== -1 ? '100px' : '128px' }">
    <div class="swiper-bg">
      <div class="swiper-bg-top" :style="{'background':bgColor}"></div>
      <div class="swiper-bg-border" :style="{'background':bgColor}"></div>
    </div>
    <yj-mob-swipe class="my-swipe" :autoplay="5000" @change="onChange">
      <yj-mob-swipe-item v-for="(item, index) in adList" :key="index">
        <img :src="item.posterUrl" alt  @click="goLink(item.linkUrl)" class="swiper-img"/>
      </yj-mob-swipe-item>
      <template #indicator>
        <div class="custom-indicator">{{ current + 1 }} / {{adList.length}}</div>
      </template>
    </yj-mob-swipe>
  </div>
</template>

<script>
import { Swipe, SwipeItem } from 'yj-mob-ui';
import pako from 'pako';
export default {
  components: {
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem
  },
  props: {
    datas: {
      type: Object
    }
  },
  data () {
    return {
      adList: [],
      current: 0,
      bgColor: ''
    };
  },
  async created () {
    this.getSwiperList();
  },
  methods: {
    /**
     * @author: ckk
     * @description:获取轮播数据
     * @return {*}
     */
    getSwiperList () {
      const grades = [],
      studyStageCode = [],
      userList = JSON.parse(decodeURIComponent(localStorage.getItem('auth_token'))).userinfo,
      userInitInfo = JSON.parse(localStorage.getItem('userInitInfo'));
      grades.push(localStorage.getItem('gradeCode'));
      studyStageCode.push(userInitInfo.stageCode);
      const userInfo = {
        roles: userList.usertype,
        grades: grades,
        platform: JSON.parse(localStorage.getItem('loginDataMobile')).Platform,
        studyStageCode: studyStageCode,
        area: userList.areaId,
        school: userList.orgId
      },
      // eslint-disable-next-line
      recommend = new window.nbocSdk.recommendSdk(userInfo);
      // 创建一个推荐位
      recommend.createRecommend(this.datas.setStyle.apiUrl).then((res) => {
        if (res.code === 200) {
          this.adList = res.list;
          if (this.adList.length > 0) {
            this.bgColor = res.list[0].rgb;
            this.$parent.getColor(res.list[0].rgb);
          }
        }
      });
    },
    unzip (b64Data) {
      let strData = atob(b64Data);
      var charData = strData.split('').map(function (x) { return x.charCodeAt(0); });
      // Turn number array into byte-array
     const binData = new Uint8Array(charData);
      // // unzip
      var data = pako.inflate(binData, { to: 'string' });
      // Convert gunzipped byteArray back to ascii string:
      strData = JSON.parse(data);
      return strData;
    },
    onChange (index) {
      this.current = index;
      this.bgColor = this.adList[index].rgb;
      this.$parent.getColor(this.adList[index].rgb);
    },
    goLink (url) {
      window.location.href = url;
    }
  }
};
</script>

<style lang="scss" >
  .reco-swiper {
    padding:8px 16px 16px 16px;
    box-sizing: border-box;
    position: relative;
    .swiper-bg{
      position: absolute;
      left:0;
      top:0;
      width:100%;
      height: 64px;
      .swiper-bg-top{
        height: 34px;
        width:100%;
      }
      .swiper-bg-border{
        border-radius: 0 0 50% 50%;
        height: 30px;
      }
    }
    img {
      width:100%;
      height:100%;
      border-radius: 5px;
    }
    .van-swipe {
      width:100%;
      height:100%;
    }
    .yj-mob-swipe-item,.van-swipe__track{
      width:100% !important;
      height:100%;
    }
    .van-swipe__indicator {
      width: 4px;
      height: 4px;
      opacity: 0.5;
      background: #ffffff;
      border-radius: 2px;
    }
    .van-swipe__indicator.van-swipe__indicator--active {
      width: 12px;
      opacity: 1;
    }
  }
  .custom-indicator {
    position: absolute;
    right: 8px;
    bottom: 9px;
    background: rgba(0,0,0,0.6500);
    border-radius: 20px 20px 20px 20px;
    font-size: 12px;
    color: #FFFFFF;
    padding:3px 10px;
  }
</style>
